<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
  <script src="./js/jquery-1.9.1.js"></script>
  <script src="./js/banner.js"></script>
  <script src='./js/box.js'></script>
  <script src='./js/car.js'>
  </script>
  <script src='./js/tranform.js'>
  </script>
  <script>
    $(function () {
      let box = $('.ipt-div')
      let iptbox = $('.ipt-out')
      let btn = $('.btn')
      let ipt = $('.ipt')
      box.hover(function () {
        btn.animate({

        })
      }, function () {
      })
      ipt.focus(function () {
      })
    })
  </script>
</head>

<body>
  <div class='mianbox'>
    <!-- 第一层图片 -->
    <div class="topimg">
      <img src="./img/top.jpg" alt="">
    </div>
    <!-- 导航栏 -->
    <div class='toplist'>
      <div class="top_infolist">
        <div class="left_infobox">
          <ul class='left_list'>
            <li class="lastli">
              <a href="#">小米商城</a>
            </li>
            <li class="lastli">
              <a href="#">MIUI</a>
            </li>
            <li class="lastli">
              <a href="#">loT</a>
            </li>
            <li class="lastli">
              <a href="#">云服务</a>
            </li>
            <li class="lastli">
              <a href="#">天星数科</a>
            </li>
            <li class="lastli">
              <a href="#">有品</a>
            </li>
            <li class="lastli">
              <a href="#">小爱开放平台</a>
            </li>
            <li class="lastli">
              <a href="#">企业团购</a>
            </li>
            <li class="lastli">
              <a href="#">资质证照</a>
            </li>
            <li class="lastli">
              <a href="#">协议规则</a>
            </li>
            <li class="lastli">
              <a href="#">下载APP</a>
            </li>
            <li class="lastli">
              <a href="#">智能生活</a>
            </li>
            <li>
              <a href="#">Select Location</a>
            </li>
          </ul>
        </div>
        <div class="right_infolist">
          <ul class="right_list">
            <li class="lastli">
              <a href="#">登录</a>
            </li>
            <li class="lastli">
              <a href="#">注册</a>
            </li>
            <li>
              <a href="#">通知消息</a>
            </li>
            <li class="car_list" id='car'>
              <a href="#">
                <span class='car_img'></span>
                <span class='car_info'>购物车</span>
              </a>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <!-- 第一主体 -->
    <div class="body">
      <!-- 身体头部导航栏 -->
      <div class="titlelist">
        <a href="#" class="titlelogo"></a>
        <ul class='body-list'>
          <li id="body-box"></li>
          <li>小米手机</li>
          <li>Redmi红米</li>
          <li>电视</li>
          <li>笔记本</li>
          <li>家电</li>
          <li>路由器</li>
          <li>智能硬件</li>
          <li>服务</li>
          <li>社区</li>
        </ul>
        <div class="ipt-box">
          <div class="ipt-div">
            <div class="ipt-out">
              <input type="text" class="ipt" placeholder="【NEW】Redmi 红米K40限量发售">
            </div>
            <div class="btn">
              <svg t="1614493979506" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="1220" width="20" height="20">
                <path
                  d="M1015.7783 938.2318 723.5205 644.0489c118.8301-156.9516 106.7182-381.4717-36.393-524.5819-156.4109-156.4109-410.0045-156.4109-566.4154 0-156.4109 156.375-156.4109 409.9697 0 566.3805 143.06 143.06 367.404 155.2425 524.3433 36.606l292.3223 294.2136c9.6051 9.6041 25.2221 9.6041 34.8252 0l43.5763-43.5763C1025.4172 963.4519 1025.4172 947.8369 1015.7783 938.2318zM194.9153 613.8132c-114.8621-114.8611-114.8621-301.0826 0-415.9089 114.8631-114.8621 301.0458-114.8621 415.9099 0 114.8631 114.8262 114.8631 301.0478 0 415.9089C495.9611 728.6764 309.7784 728.6764 194.9153 613.8132z"
                  p-id="1221" fill="#515151"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <!-- 主体轮播图 -->
      <div class="body-main">
        <div class="main_btn_left">=</div>
        <div class="main_btn_right">></div>
        <ul class="banner">
          <li>
            <img src="./img/banner1.webp" alt="">
          </li>
          <li>
            <img src="./img/banner2.jpg" alt="">
          </li>
          <li>
            <img src="./img/banner3.webp" alt="">
          </li>
          <li>
            <img src="./img/banner4.webp" alt="">
          </li>
          <li>
            <img src="./img/banner5.webp" alt="">
          </li>
        </ul>
        <div class="left-list">
          <ul>
            <li><a href="#">电视 盒子</a><span><svg t="1614495772949" class="icon-span" viewBox="0 0 1000 1000"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3317" width="15" height="15">
                  <path
                    d="M779.805 547.753l-359.021-386.738-165.645 0 359.02 386.737-359.021 359.006 165.645 0 359.021-359.006zM779.805 547.753z"
                    p-id="3318" fill="#ffffff"></path>
                </svg></span> </li>
            <li><a href="#">手机 电话卡</a><span><svg t="1614495772949" class="icon-span" viewBox="0 0 1000 1000"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3317" width="15" height="15">
                  <path
                    d="M779.805 547.753l-359.021-386.738-165.645 0 359.02 386.737-359.021 359.006 165.645 0 359.021-359.006zM779.805 547.753z"
                    p-id="3318" fill="#ffffff"></path>
                </svg></span> </li>
            <li><a href="#">笔记本 显示器</a><span><svg t="1614495772949" class="icon-span" viewBox="0 0 1000 1000"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3317" width="15" height="15">
                  <path
                    d="M779.805 547.753l-359.021-386.738-165.645 0 359.02 386.737-359.021 359.006 165.645 0 359.021-359.006zM779.805 547.753z"
                    p-id="3318" fill="#ffffff"></path>
                </svg></span> </li>
            <li><a href="#">家电 插线板</a><span><svg t="1614495772949" class="icon-span" viewBox="0 0 1000 1000"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3317" width="15" height="15">
                  <path
                    d="M779.805 547.753l-359.021-386.738-165.645 0 359.02 386.737-359.021 359.006 165.645 0 359.021-359.006zM779.805 547.753z"
                    p-id="3318" fill="#ffffff"></path>
                </svg></span> </li>
            <li><a href="#">出行 穿戴</a><span><svg t="1614495772949" class="icon-span" viewBox="0 0 1000 1000"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3317" width="15" height="15">
                  <path
                    d="M779.805 547.753l-359.021-386.738-165.645 0 359.02 386.737-359.021 359.006 165.645 0 359.021-359.006zM779.805 547.753z"
                    p-id="3318" fill="#ffffff"></path>
                </svg></span> </li>
            <li><a href="#">智能 路由器</a><span><svg t="1614495772949" class="icon-span" viewBox="0 0 1000 1000"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3317" width="15" height="15">
                  <path
                    d="M779.805 547.753l-359.021-386.738-165.645 0 359.02 386.737-359.021 359.006 165.645 0 359.021-359.006zM779.805 547.753z"
                    p-id="3318" fill="#ffffff"></path>
                </svg></span> </li>
            <li><a href="#">电源 配件</a><span><svg t="1614495772949" class="icon-span" viewBox="0 0 1000 1000"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3317" width="15" height="15">
                  <path
                    d="M779.805 547.753l-359.021-386.738-165.645 0 359.02 386.737-359.021 359.006 165.645 0 359.021-359.006zM779.805 547.753z"
                    p-id="3318" fill="#ffffff"></path>
                </svg></span> </li>
            <li><a href="#">健康 儿童</a><span><svg t="1614495772949" class="icon-span" viewBox="0 0 1000 1000"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3317" width="15" height="15">
                  <path
                    d="M779.805 547.753l-359.021-386.738-165.645 0 359.02 386.737-359.021 359.006 165.645 0 359.021-359.006zM779.805 547.753z"
                    p-id="3318" fill="#ffffff"></path>
                </svg></span> </li>
            <li><a href="#">耳机 音响</a><span><svg t="1614495772949" class="icon-span" viewBox="0 0 1000 1000"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3317" width="15" height="15">
                  <path
                    d="M779.805 547.753l-359.021-386.738-165.645 0 359.02 386.737-359.021 359.006 165.645 0 359.021-359.006zM779.805 547.753z"
                    p-id="3318" fill="#ffffff"></path>
                </svg></span> </li>
            <li><a href="#">生活 包箱</a><span><svg t="1614495772949" class="icon-span" viewBox="0 0 1000 1000"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3317" width="15" height="15">
                  <path
                    d="M779.805 547.753l-359.021-386.738-165.645 0 359.02 386.737-359.021 359.006 165.645 0 359.021-359.006zM779.805 547.753z"
                    p-id="3318" fill="#ffffff"></path>
                </svg></span> </li>
          </ul>
        </div>
        <ul class="dian">
          <li class="on"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <!-- 轮播图下面的 -->
      <div class="body-bottom">
        <div class="span1">
          <ul>
            <li>小米秒杀</li>
            <li>企业团购</li>
            <li>F码通道</li>
            <li>米粉卡</li>
            <li>以旧换新</li>
            <li>话费充值</li>
          </ul>
        </div>
        <div class="span2">
          <ul>
            <li>
              <img src="./img/img11.jpg" alt="">
            </li>
            <li>
              <img src="./img/img11.jpg" alt="">
            </li>
            <li>
              <img src="./img/img11.jpg" alt="">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="infobody">
    <!-- 内容栏目 -->
    <div class="info">
      <div class="info_span1">
        <h2>小米秒杀</h2>
        <div class="ms">
          <span>14:00场</span>
          <img src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAA1CAYAAAAklDnhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
          bWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
          bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
          eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1
          MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
          dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
          dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
          IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
          ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
          cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5j
          ZUlEPSJ4bXAuaWlkOjY4Q0ZFMkY5MTJFNzExRThCMkM4OEM1RTNBNjczQUVBIiB4bXBNTTpEb2N1
          bWVudElEPSJ4bXAuZGlkOjY4Q0ZFMkZBMTJFNzExRThCMkM4OEM1RTNBNjczQUVBIj4gPHhtcE1N
          OkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDRkUyRjcxMkU3MTFFOEIy
          Qzg4QzVFM0E2NzNBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjhDRkUyRjgxMkU3MTFF
          OEIyQzg4QzVFM0E2NzNBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94Onht
          cG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5oEyacAAACoklEQVR42sSYv0tbURTHX0LqD6T4g4pE
          cHDoUOloBxVd/QFFEcQqWtrSKlKFmmAslopohzgIbv4FwUEE0clFujiIi+BSIbRQ0ooKRReRULHf
          S48Qgu++c3/FAx+iyU3eJzf3nnPuC/1qavQ04zVY8szjCHRGNN9cBD6DSkOJKzAGzsOaH/AW1FuY
          jRg4EH/oiJSCTxYk1sDK7T86Iu9BraHED/Au9wlVkYdg2lAiC/rBhYnIB/DIUOQj2M9/UkWkCsQN
          JbbA8l0vqIhMgXIDiZ/gFbgxEakBEwYSf8Eg+OM3gCsyA8oMRETy25UN4IjUgVEDiW2wGDSIIzIL
          ijUljsFLv3WhIvKYFphOXNO6OOUMDhKZA7qFcQF85Q6WXeQpeKEpcULlvY8xthp8iwR8I93qLLb7
          KnOsSPWNfhd6Bro99yHqTi9IhyWzEXIsIXbSG7Djt1jbQHsBZkMkyZRs13wpgIRoiJKy7dsBWh1L
          bN5Vt3JFQrQ2XMYeGKBk5yvSI7aRQ4k0eA4uZZlVPM47lDgTZxd6lKb4AcqkLuKSZiIdVGsiVFNc
          xDV9yT1Orekjoe+MDw4pHqwmaJewit66Ql0QaX+DOTaZe4DitAFZxQaaEynKnJ6KCDeaQAtj3A7V
          kBtXIpwT3iFV06zqquaKPKEtKIsM6Mo/StoWiQeMvSCJjO4+54hEwTCjuTk0STgckUm6QxTY3LgU
          Kc+/jyFrblyKCIkKbnPjSkT8HDGV5saVyBAtVHZz40Ik7HNTRtrcuBARF2tQbW5ciCR0mhvbIs2E
          cnNjWySh29zYFGnIK25KzY1Nkdziptzc2BKJUu7Qbm5sicQom2o3NzZEKqiu/DZpbmyIjIAHNBMZ
          7x4iTALjhcgVQSIl3v87w5vePcY/AQYAFYR6skFSqBUAAAAASUVORK5CYII=" alt="小米闪购" class='ms_img'>
          <div class="info_div1">距离结束还有</div>
          <div class="info_div2">
            <span>02</span>
            <i>:</i>
            <span>52</span>
            <i>:</i>
            <span>23</span>
          </div>
        </div>
        <div class="playbox">
          <ul class="info_span1_list">
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T100</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T200</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T300</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T400</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T100</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T200</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T300</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T400</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T100</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T200</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T300</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
            <li>
              <img src="./img/info.webp" alt="">
              <h3>米家声波电动牙刷T400</h3>
              <p class="info_span1_p1">刷的干净 智能护齿</p>
              <p class="sprice">
                <span class="nowsprice">179元</span>
                <del class="sprice1">199元</del>
              </p>
            </li>
          </ul>
        </div>
        <div class="info_btn">
          <span class="info_btn_left">></span>
          <span class="info_btn_right">></span>
        </div>
      </div>
    </div>
    <!-- 图片 -->
    <div class="img-box">
      <img src="./img/img.webp" alt="">
    </div>
    <!-- list内容 -->
    <div class="list">
      <h2>手机</h2>
      <div class="big_img"></div>
      <div class="list_ul">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class='list_info'>
        查看详情
      </div>
    </div>
    <div style="width: 100%; height: 500px;"></div>
  </div>


</body>

</html>